<template>
	<div class="account">
		<el-container>
			<el-aside class="tabs" style="width: 210px">
				<div class="group-main">
					<el-button
						size="small"
						class="btn-blue"
						@click="
							() => {
								operationType = 'add';
								roleText = '新增角色';
								addGroupFlag = true;
							}
						"
					>
						新增角色
					</el-button>
					
					<el-tree
						style="margin-top: 20px"
						:data="allGroupData"
						node-key="id"
						ref="tree"
						default-expand-all
						:expand-on-click-node="false"
						@node-click="handleTreeNode"
						:highlight-current="true"
						:current-node-key="role_id"
					>
						<template slot-scope="{ data }">
							<div class="tree-wrap">
								<span :title="data.name" :class="role_id === data.id ? 'active group-name' : 'group-name'">{{ data.name }}</span>
								<div class="drop-wrap">
									<el-dropdown v-show="data.name !== '所有' && data.name !== '未分组'" @command="handleCommand($event, data)">
										<span class="el-dropdown-link span-wrap"><i class="more el-icon-more"></i></span>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item command="edit">编辑角色</el-dropdown-item>
											<el-dropdown-item command="delete">删除角色</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
							</div>
						</template>
					</el-tree>
				</div>
			</el-aside>
			<el-main>
				<div class="title">
					{{ $route.meta.title }}
					<i @click="showCourse = !showCourse" class="iconfont icon-question-circle"></i>
				</div>
				<div class="course" v-show="showCourse">
					<p><span class="black">1、为企业管理人员提供多账号管理，可进行角色分配与权限设置，根据用户管理权限设置相应的账号。</span></p>
					<p><span class="black">2、禁用账号后，对应用户将无法登录使用此系统。</span></p>
				</div>
				<div class="btns">
					<el-select style="margin-right: 10px" size="small" v-model="disable" placeholder="账号状态">
						<el-option v-for="item in disableList" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<el-input size="small" v-model="keyword" placeholder="搜索用户名或手机号"></el-input>
					<el-button
						size="small"
						class="btn-blue"
						@click="
							() => {
								if (keyword) {
									page = 1;
									reqGetUserList();
								}
							}
						"
					>
						查找
					</el-button>
					<el-button size="small" class="btn-white" @click="keyword = ''">清空</el-button>
					<el-button
						size="small"
						:disabled="checkList.length === 0"
						:class="checkList.length === 0 ? 'btn-disabled right' : 'btn-blue right'"
						@click="handleBatchDisable"
					>
						批量禁用
					</el-button>
					<el-button
						size="small"
						:disabled="checkList.length !== 0"
						:class="checkList.length !== 0 ? 'btn-disabled' : 'btn-blue'"
						@click="
							() => {
								userType = 'add';
								addFlag = true;
							}
						"
					>
						添加子账号
					</el-button>
				</div>
				<div class="table">
					<el-table
						v-loading="tableLoding"
						:data="tableData"
						style="width: 100%"
						:header-cell-style="{
							color: '#333',
							fontSize: '14px',
							backgroundColor: '#F6F7FB',
							fontWeight: 'normal'
						}"
						@selection-change="handleSelectionChange"
					>
						>
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column prop="username" label="用户名">
							<template slot-scope="scope">
								{{ scope.row.username }}
								<img v-show="scope.row.gender == 1" style="vertical-align: middle" src="../assets/images/boy.png" width="16" alt="" />
								<img v-show="scope.row.gender == 2" style="vertical-align: middle" src="../assets/images/girl.png" width="16" alt="" />
							</template>
						</el-table-column>
						<el-table-column prop="department" label="所属部门">
							<template slot-scope="scope">
								{{ scope.row.department || '--' }}
							</template>
						</el-table-column>
						<el-table-column prop="phone" label="手机号（登录手机号）" width="200px"></el-table-column>
						<el-table-column prop="role_name" label="所属角色">
							<template slot-scope="scope">
								{{ scope.row.is_main == 1 ? '主账号' : scope.row.role_name || '--' }}
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template slot-scope="scope">
								<el-switch
									:disabled="scope.row.is_main == 1"
									v-model="scope.row.disable"
									:active-value="0"
									:inactive-value="1"
									@change="handleChangeState($event, scope.row.id)"
								></el-switch>
							</template>
						</el-table-column>
						<el-table-column prop="create_at" label="添加时间" width="180"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" style="margin-left: 10px; color: #6881ec" @click="handleShowDetail(scope.row)">详情</el-button>
								<el-button v-if="scope.row.is_main == 0" type="text" style="color: #6881ec" @click="handleEditUser(scope.row)">编辑</el-button>
								<el-button type="text" style="color: #6881ec" @click="handleResetPwd(scope.row)">重置密码</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="pagination" v-if="tableData.length !== 0">
					<el-pagination
						@size-change="handleLimitChange"
						@current-change="handlePageChange"
						:current-page="page"
						:page-sizes="[10, 20, 40, 80]"
						:page-size="limit"
						layout="total, sizes, prev, pager, next, jumper"
						:total="total"
					></el-pagination>
				</div>
			</el-main>
		</el-container>
		<!-- 添加子账号 -->
		<el-dialog :title="userText" :visible.sync="addFlag" width="640px" :close-on-click-modal="false" :close-on-press-escape="false" @close="closeUser">
			<el-form label-position="left" label-width="150px" ref="addUserForm" :rules="rules" :model="formData">
				<el-form-item label="用户名" prop="username"><el-input size="small" v-model="formData.username" placeholder="请输入用户名"></el-input></el-form-item>
				<el-form-item label="手机号码" prop="phone">
					<el-input :disabled="userType === 'edit'" size="small" maxlength="11" v-model="formData.phone" placeholder="请输入手机号码"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="gender" required>
					<el-radio v-model="formData.gender" :label="1">男</el-radio>
					<el-radio v-model="formData.gender" :label="2">女</el-radio>
				</el-form-item>
				<el-form-item label="所属部门" prop="department"><el-input size="small" v-model="formData.department" placeholder="请输入所属部门"></el-input></el-form-item>
				<el-form-item v-if="userType != 'edit'" label="登录密码" prop="password">
					<el-input size="small" type="password" v-model="formData.password" placeholder="请输入登录密码"></el-input>
				</el-form-item>
				<el-form-item label="所属角色" prop="role_id">
					<el-select size="small" v-model="formData.role_id" placeholder="请选择所属角色">
						<el-option v-for="item in groupData" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" class="btn-white" @click="addFlag = false">取 消</el-button>
				<el-button size="small" class="btn-blue" @click="handleSubmitUser('addUserForm')">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 新增/编辑角色 -->
		<el-dialog
			:title="roleText"
			:visible.sync="addGroupFlag"
			:width="operationType === 'delete' ? '300px' : '800px'"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			@close="handleClose"
		>
			<div class="scroll">
				<el-form v-if="operationType == 'add' || operationType == 'edit'" label-position="left" label-width="150px" ref="addRoleForm" :rules="rules" :model="formData">
					<el-form-item label="角色名称" prop="name">
						<el-input size="small" v-model="formData.name" maxlength="10" show-word-limit placeholder="请输入角色名称"></el-input>
					</el-form-item>
					<el-form-item label="企业微信权限" required>
						<el-tree
							ref="permissTree"
							:default-expand-all="true"
							:props="{
								label: 'title',
								children: 'group'
							}"
							style="margin-top: 10px"
							node-key="id"
							:data="permissions"
							show-checkbox
							@check-change="handleCheckChange"
						></el-tree>
					</el-form-item>
				</el-form>
				<div v-else-if="operationType === 'delete'">确定删除该角色（【{{ roleObj.name }}】）吗?</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" class="btn-white" @click="handleClose">取 消</el-button>
				<el-button size="small" class="btn-blue" @click="handleAddRoleConfirm('addRoleForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 重置密码 -->
		<el-dialog title="重置密码" :visible.sync="resetFlag" width="400px" :close-on-click-modal="false" :close-on-press-escape="false" @close="resetClose">
			<el-form label-position="left" label-width="150px" :model="formData" :rules="rules" ref="resetForm">
				<el-form-item label="新密码" prop="pwd">
					<el-input size="small" type="password" v-model="formData.pwd" show-word-limit placeholder="请输入新密码"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="verify_pwd">
					<el-input size="small" type="password" v-model="formData.verify_pwd" show-word-limit placeholder="请输入确认密码"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" class="btn-white" @click="resetClose">取 消</el-button>
				<el-button size="small" class="btn-blue" @click="handleResetConfirm('resetForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 子账号详情 -->
		<el-drawer
			title="账户详情"
			:visible.sync="drawer"
			:before-close="
				done => {
					done();
				}
			"
		>
			<el-tabs v-model="tabsName" v-loading="loading2">
				<el-tab-pane label="账号信息" name="1">
					<el-form label-position="left" label-width="80px">
						<el-form-item label="用户名">{{ detail.username || '--' }}</el-form-item>
						<el-form-item label="手机号">{{ detail.phone || '--' }}</el-form-item>
						<el-form-item label="性别">{{ detail.gender == 1 ? '男' : detail.gender == 0 ? '女' : '未知' }}</el-form-item>
						<el-form-item label="所属部门">{{ detail.department || '--' }}</el-form-item>
						<el-form-item label="所属角色">{{ detail.is_main == 1 ? '主账号' : detail.role_name || '--' }}</el-form-item>
						<el-form-item label="状态">{{ detail.disable == 0 ? '正常' : '禁用' }}</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="权限信息" name="2">
					<div class="scroll">
						<el-tree
							ref="drTree"
							:default-expand-all="true"
							:props="{
								label: 'title',
								children: 'group',
								disabled: () => {
									return true;
								}
							}"
							style="margin-top: 10px"
							node-key="id"
							:data="permissions"
							show-checkbox
						></el-tree>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-drawer>
	</div>
</template>

<script>
import {
	reqGetUserList,
	reqGetRolesList,
	reqAddRole,
	reqShowRolesModule,
	reqEditRole,
	reqShowRolesInfo,
	reqDeleteRole,
	reqEditUser,
	reqAddUser,
	reqGetUserInfo,
	reqEditUserDisable,
	reqResetUserPassword,
	reqBatchEditUserDisable
} from '@/api/index';
export default {
	data() {
		var phone = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入手机号'));
			} else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
				callback(new Error('手机号有误，请重新输入'));
			} else {
				callback();
			}
		};
		var pwd = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.formData.pwd !== '') {
					this.$refs.resetForm.validateField('verify_pwd');
				}
				callback();
			}
		};
		var verify_pwd = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.formData.pwd) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			showCourse: false,
			page: 1,
			limit: 10,
			total: 0,
			groupData: [],
			addGroupFlag: false,
			operationType: '', //操作类型
			checkList: [],
			tableLoding: false,
			tableData: [],
			addFlag: false,
			options: [],
			status: '',
			keyword: '',
			disable: '',
			disableList: [
				{
					value: '',
					label: '所有'
				},
				{
					value: 0,
					label: '正常'
				},
				{
					value: 1,
					label: '禁用'
				}
			],
			formData: {
				username: '',
				department: '',
				password: '',
				name: '',
				phone: '',
				gender: 1,
				module_id: [],
				role_id: '',
				pwd: '',
				verify_pwd: ''
			},
			rules: {
				username: [
					{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}
				],
				phone: [
					{
						required: true,
						validator: phone,
						trigger: 'blur'
					}
				],
				department: [
					{
						required: true,
						message: '请输入部门名称',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入登录密码',
						trigger: 'blur'
					}
				],
				role_id: [
					{
						required: true,
						message: '请选择所属角色',
						trigger: 'blur'
					}
				],
				name: [
					{
						required: true,
						message: '角色名称不能为空',
						trigger: 'blur'
					}
				],
				pwd: [
					{
						required: true,
						validator: pwd,
						trigger: 'blur'
					}
				],
				verify_pwd: [
					{
						required: true,
						validator: verify_pwd,
						trigger: 'blur'
					}
				]
			},
			role_id: '',
			permissions: [],
			roleText: '',
			roleObj: {},
			userObj: {},
			userType: '',
			userText: '',
			resetFlag: false,
			resetId: '',
			drawer: false,
			detail: '',
			/**子账户详情 */
			tabsName: '1',
			loading2: false
		};
	},
	watch: {
		disable() {
			this.reqGetUserList();
		},
		keyword(val) {
			if (!val) {
				this.page = 1;
				this.reqGetUserList();
			}
		},
		operationType(val) {
			switch (val) {
				case 'add':
					this.roleText = '新增角色';
					break;
				case 'edit':
					this.roleText = '编辑角色';
					break;
				case 'delete':
					this.roleText = '删除角色';
					break;
			}
		},
		userType(val) {
			switch (val) {
				case 'add':
					this.userText = '新增子账号';
					break;
				case 'edit':
					this.userText = '编辑子账号';
					break;
			}
		},
		drawer(val) {
			!val ? (this.tabsName = '1') : '';
		}
	},
	computed: {
		allGroupData() {
			return [
				{
					id: '',
					name: '所有'
				},
				...this.groupData
			];
		},
		module_id() {
			return this.formData.module_id.join(',');
		},
		allModuleId() {
			if (this.permissions.length) {
				let arr = [];
				this.filterModuleId(arr, this.permissions);
				return arr;
			} else {
				return [];
			}
		},
		userIdList() {
			let arr = [];
			this.checkList.map(res => {
				arr.push(res.id);
			});
			return arr;
		}
	},
	mounted() {
		this.reqGetRolesList();
	},
	methods: {
		filterModuleId(newArr, target) {
			for (let i = 0; i < target.length; i++) {
				if (target[i].group.length) {
					this.filterModuleId(newArr, target[i].group);
				} else {
					newArr.push(target[i].id);
				}
			}
		},
		// 获取角色列表
		async reqGetRolesList() {
			let res = await reqGetRolesList({});
			this.reqGetUserList();
			this.reqShowRolesModule();
			this.groupData = res.data;
		},
		// 新增角色
		async reqAddRole() {
			let res = await reqAddRole({
				name: this.formData.name,
				module_id: this.module_id
			});
			this.reqGetRolesList();
			this.addGroupFlag = false;
			this.$message.success(res.msg);
		},
		// 获取权限列表
		async reqShowRolesModule() {
			let res = await reqShowRolesModule({});
			this.permissions = res.data;
		},
		// 编辑角色
		async reqEditRole(params) {
			let res = await reqEditRole(params);
			this.addGroupFlag = false;
			this.reqGetRolesList();
			this.roleObj = {};
			this.$message.success(res.msg);
		},
		// 删除角色
		async reqDeleteRole() {
			let res = await reqDeleteRole({
				id: this.roleObj.id
			});
			this.addGroupFlag = false;
			this.reqGetRolesList();
			this.$message.success(res.msg);
		},
		// 角色编辑回显
		async reqShowRolesInfo(id) {
			let res = await reqShowRolesInfo({
				id
			});
			this.formData.name = res.data.name;
			this.formData.module_id = res.data.module_id;
			this.roleObj = {
				id: res.data.id,
				disable: res.data.disable
			};
			this.$nextTick(() => {
				console.log(res.data.module_id);
				res.data.module_id.forEach(key => {
					this.$refs.permissTree.setChecked(key, true);
				});
			});
		},
		// 获取成员列表
		async reqGetUserList() {
			this.tableLoding = true;
			let res = await reqGetUserList({
				keyword: this.keyword,
				disable: this.disable,
				role_id: this.role_id,
				page: this.page,
				limit: this.limit
			});
			this.$nextTick(() => {
				this.$refs.tree.setCurrentKey(this.role_id);
			});
			this.tableData = res.data;
			this.total = res.count;
			this.tableLoding = false;
		},
		// 编辑成员
		async reqEditUser(params) {
			let res = await reqEditUser(params);
			this.reqGetUserList();
			this.addFlag = false;
			this.$message.success(res.msg);
		},
		// 添加成员
		async reqAddUser(params) {
			let res = await reqAddUser(params);
			this.reqGetUserList();
			this.addFlag = false;
			this.$message.success(res.msg);
		},
		// 获取子账号详情
		async reqGetUserInfo(id) {
			let res = await reqGetUserInfo({
				id
			});
		},
		// 批量禁用账号状态
		async reqEditUserDisable() {
			let res = await reqEditUserDisable({
				id: this.userIdList,
				disable: 1
			});
			this.reqGetUserList();
			this.$message.success(res.msg);
		},
		// 子账号重置密码
		async reqResetUserPassword(id) {
			let res = await reqResetUserPassword({
				id,
				pwd: this.formData.pwd,
				verify_pwd: this.formData.verify_pwd
			});
			this.resetFlag = false;
			this.$message.success(res.msg);
		},
		// 批量修改子账号状态
		async reqBatchEditUserDisable(id, disable) {
			let res = await reqBatchEditUserDisable({
				id,
				disable
			});
			this.reqGetUserList();
			this.$message.success(res.msg);
		},
		// 修改子账号状态
		handleChangeState(disable, id) {
			this.reqBatchEditUserDisable([id], disable);
		},
		// 点击分组列表
		handleTreeNode(obj) {
			this.formData.role_id = obj.id;
			this.role_id = obj.id;
			this.page = 1;
			this.reqGetUserList();
		},
		// 多选操作
		handleSelectionChange(checkList) {
			this.checkList = checkList;
		},
		handleClose() {
			this.formData.name = '';
			this.formData.module_id = [];
			this.roleObj = {};
			this.$refs.permissTree
				? this.$nextTick(() => {
						this.$refs.permissTree.setCheckedKeys([]);
				  })
				: '';
			this.$refs.addRoleForm ? this.$refs.addRoleForm.clearValidate() : '';
			this.addGroupFlag = false;
		},
		handleLimitChange(limit) {
			this.limit = limit;
			this.reqGetUserList();
		},
		handlePageChange(page) {
			this.page = page;
			this.reqGetUserList();
		},
		handleCheckChange() {
			this.formData.module_id = [];
			[...this.$refs.permissTree.getCheckedNodes(false, true)].forEach(item => {
				this.formData.module_id.push(item.id);
			});
		},
		handleAddRoleConfirm(formName) {
			if (this.operationType == 'delete') {
				this.reqDeleteRole();
			} else {
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (this.operationType == 'add') {
							if (this.formData.module_id.length === 0) {
								this.$message.error('至少选择一项角色权限');
							} else {
								this.reqAddRole();
							}
						} else if (this.operationType == 'edit') {
							if (this.formData.module_id.length === 0) {
								this.$message.error('至少选择一项角色权限');
							} else {
								this.roleObj.name = this.formData.name;
								this.roleObj.module_id = this.module_id;
								this.reqEditRole(this.roleObj);
							}
						}
					} else {
						return false;
					}
				});
			}
		},
		handleCommand(commond, data) {
			if (commond !== 'delete') {
				this.reqShowRolesInfo(data.id);
			} else {
				this.roleObj = {
					id: data.id,
					name: data.name
				};
			}
			this.operationType = commond;
			this.addGroupFlag = true;
		},
		handleSubmitUser(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					if (this.userType === 'add') {
						this.reqAddUser({
							username: this.formData.username,
							phone: this.formData.phone,
							password: this.formData.password,
							gender: this.formData.gender,
							department: this.formData.department,
							role_id: this.formData.role_id
						});
					} else {
						this.reqEditUser({
							id: this.formData.id,
							username: this.formData.username,
							gender: this.formData.gender,
							department: this.formData.department,
							role_id: this.formData.role_id
						});
					}
				} else {
					return false;
				}
			});
		},
		handleEditUser(data) {
			this.userType = 'edit';
			this.formData.username = data.username;
			this.formData.phone = data.phone;
			this.formData.department = data.department;
			this.formData.gender = data.gender;
			this.formData.id = data.id;
			this.formData.role_id = data.role_id;
			this.addFlag = true;
		},
		closeUser() {
			this.addFlag = false;
			this.formData.username = '';
			this.formData.phone = '';
			this.formData.gender = 1;
			this.formData.department = '';
			this.formData.password = '';
			this.formData.role_id = '';
			this.$refs.addUserForm.clearValidate();
		},
		handleBatchDisable() {
			this.$confirm('是否禁用所选账号状态', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.reqEditUserDisable();
			});
		},
		handleResetPwd(data) {
			this.resetId = data.id;
			this.resetFlag = true;
		},
		handleResetConfirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.reqResetUserPassword(this.resetId);
				} else {
					return false;
				}
			});
		},
		resetClose() {
			this.resetFlag = false;
			this.formData.pwd = '';
			this.formData.verify_pwd = '';
			this.resetId = '';
			this.$refs.resetForm.clearValidate();
		},
		// 账户详情
		handleShowDetail(data) {
			this.detail = data;
			this.drawer = true;
			this.loading2 = true;
			reqShowRolesInfo({
				id: data.role_id
			}).then(res => {
				this.loading2 = false;
				this.$nextTick(() => {
					if (res.data.module_id.length === 1) {
						this.$refs.drTree.setCheckedKeys(this.allModuleId);
					} else {
						this.$refs.drTree.setCheckedKeys(res.data.module_id);
					}
				});
			});
		}
	}
};
</script>

<style lang="less" scoped>
.account {
	.el-container {
		width: 100%;
		height: calc(100vh - 135px);

		.el-aside {
			padding: 15px;
			border-radius: 10px;
			border: 1px solid #b9c5e9;

			.group-main {
				position: relative;
				width: 100%;
				height: 100%;
				overflow-y: auto;
				overflow-x: hidden;
				font-size: 14px;

				.el-tree {
					position: absolute;
					min-width: 178px;
					padding-right: 5px;

					/deep/.el-tree-node > .el-tree-node__children {
						overflow: auto;
					}

					.drop-wrap {
						position: absolute;
						right: 20px;
					}
				}
			}

			.more {
				visibility: hidden;
			}

			// 树形控件
			/deep/.el-tree-node {
				width: 160px;

				&:hover .more {
					color: #6881ec;
					visibility: visible !important;
				}

				&:hover .group-name {
					color: #6881ec;
				}

				/deep/.el-tree-node__content {
					height: 40px;
					border-radius: 6px;
				}
			}

			.tree-wrap {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.name-wrap {
					display: inline-block;
					width: 100px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.span-wrap > i {
					margin-right: 10px;
				}
			}
		}

		.el-main {
			height: 100%;
			padding: 0 15px;

			> div {
				width: 100%;
			}

			> div + div {
				margin-top: 20px;
			}

			.btns {
				display: flex;
				align-items: center;

				.el-input {
					width: 200px;
					margin-right: 10px;
				}

				.right {
					margin-left: auto;
				}
			}

			.tabs {
				position: relative;
				display: flex;
				align-items: center;

				.tab-pane {
					padding: 7px 20px;
					line-height: 1;
					border: 1px solid #b9c5e9;
					background: #f6f7fb;
					border-radius: 6px 6px 0px 0px;
					font-size: 14px;
					font-weight: 400;
					color: #333333;
					cursor: pointer;
					z-index: 10;
				}

				.tab-pane.active {
					border-bottom: transparent;
					background-color: #fff;
					color: #6881ec;
				}

				.line {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 0;
					border-bottom: 1px solid #b9c5e9;
					z-index: 5;
				}

				.tab-pane + .tab-pane {
					margin-left: 10px;
				}
			}
		}
	}

	.el-tabs {
		.scroll {
			height: calc(100vh - 160px);
			overflow-x: hidden;
			overflow-y: auto;
		}
	}
}
</style>
